<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button onclick="add()">添加</button>
		<table border="1" >
			<thead>
				<tr>
					<th>大类</th>
					<th>小类</th>
					<th>件数</th>
					<th>单位</th>
					<th>描述</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				
			</tbody>
		</table>
		<script type="text/javascript">
			let arr=[
				{type1:"肉类",type2:"猪肉",count:1,unit:"箱",desc:"无"},
				{type1:"肉类",type2:"猪肉",count:2,unit:"箱",desc:"无"},
				{type1:"肉类",type2:"猪肉",count:3,unit:"箱",desc:"无"},
				{type1:"肉类",type2:"猪肉",count:4,unit:"箱",desc:"无"},
				{type1:"肉类",type2:"猪肉",count:5,unit:"箱",desc:"无"}
			];
			//获取table对象
			let table=document.getElementsByTagName("table")[0];
			let tbody=table.getElementsByTagName("tbody")[0];
			update();
			// 循环渲染表格
			function update(){
				
			for (let index in arr) {
				let item=arr[index];
				let tr=document.createElement("tr");
				tbody.appendChild(tr);
				let td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.type1;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.type2;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.count;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.unit;
				td=document.createElement("td");
				tr.appendChild(td);
				td.innerText=item.desc;
				td=document.createElement("td");
				tr.appendChild(td);
				// 使用反引号进行多行编辑
				td.innerHTML=`
				<Button>编辑</Button>
				 <Button onclick="del(${index})">删除</Button>`
			}
			}
			function clear(){
				//下面for循环可以直接使用：tbody.remove;代替
				let trs=tbody.children;
				for (let index in trs) {
					tbody.remove(trs[index]);
				}
				tbody=document.createElement("tbody");
				table.appendChild(tbody);
			}
			function add(){
				clear();
			    arr.push({type1:"肉类",type2:"猪肉",count:1,unit:"箱",desc:"无"},)
				update();
							}
			function del(index){
				arr.splice(index,1);
				clear();
				update();
			}
		</script>
	</body>
</html>
